<template>
    <div class="box1">
        <div class="box2">
            <el-col :span="12">
                <!-- <h5>自定义颜色</h5> -->
                <el-menu
                    default-active="1"
                    class="el-menu-vertical-demo"
                    @open="handleOpen"
                    @close="handleClose"
                    background-color="#545c64"
                    text-color="#fff"
                    active-text-color="#ffd04b"
                >
                    <el-submenu
                        index="1"
                        v-for="item in menuData"
                        :key="item.id"
                        :open="activeParent === item.id"
                    >
                        <template
                            slot="title"
                            @click="handleParentClick(item.id)"
                        >
                            <i class="el-icon-location"></i>
                            <span>{{ item.meta.title }}</span>
                        </template>
                        <el-menu-item-group
                            v-for="child in item.children"
                            :key="child.id"
                            @click.native="handleChildClick(child)"
                        >
                            <template slot="title"></template>
                            <el-menu-item>{{ child.meta.title }}</el-menu-item>
                            <!-- <el-menu-item index="1-2">选项2</el-menu-item> -->
                        </el-menu-item-group>
                    </el-submenu>
                    <!-- <el-menu-item index="2">
                        v-for="item in menuData"
                        :key="item.id"
                        @click="handleClick(item.id)"
                        :open="activeParent === item.id"
                    >
                        <template slot="title">
                            <i class="el-icon-location"></i>
                            <span>{{ item.meta.title }}</span>
                        </template>
                        <el-menu-item-group
                            v-for="child in item.children"
                            :key="child.id"
                            @click.native="handleChildClick(child)"
                        >
                            <template slot="title"></template>
                            <el-menu-item>{{ child.meta.title }}</el-menu-item>
                            <el-menu-item index="1-2">选项2</el-menu-item> -->
                    <!-- <el-menu-item index="1-3">选项3</el-menu-item> -->
                    <!-- </el-menu-item-group> -->

                    <!-- </el-menu-item-group> -->
                    <!-- </el-submenu> -->
                </el-menu>
            </el-col>
        </div>
        <div class="box3"></div>
    </div>
</template>

<script>
import { getRouters } from '../api/login'
export default {
    name: 'HelloVue',
    data() {
        return {
            menuData: [],
            activeChild: null,
            activeParent: null // 记录当前展开的一级菜单标识
        }
    },
    methods: {
        handleOpen(key, keyPath) {
            console.log(key, keyPath)
        },
        handleClose(key, keyPath) {
            console.log(key, keyPath)
        },
        getMenuData() {
            getRouters().then((res) => {
                this.menuData = res.data.data
                console.log(this.menuData)
            })
        },
        handleChildClick(child) {
            this.activeChild = child
            // 这里可以添加点击二级菜单后的具体逻辑，比如加载数据等
            console.log('点击了二级菜单:', child)
        },
        handleParentClick(id) {
            // 点击一级菜单时，更新当前展开的一级菜单标识
            this.activeParent = this.activeParent === id ? null : id
        }
    },
    mounted() {
        this.getMenuData()
    }
}
</script>

<style scoped lang="less">
/* Your styles here */
.box1 {
    width: 100%;
    height: 100%;
    display: flex;
    .box2 {
        width: 25%;
    }
}
</style>